<include file="public@header" />
</head>

<link href="__STATIC__/css/element/index.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<style type="text/css">
    html,
    body {
        overflow: visible;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-input__inner {
        height: 35px !important;
        line-height: 35px !important;
    }
</style>

<body>
    <div class="wrap js-check-wrap" id="app">
        <ul class="nav nav-tabs">
            <li><a href="{:url('Planhj/allindex')}">列表</a></li>
            <li class="active"><a href="{:url('Planhj/addvue')}">添加</a></li>
        </ul>
        <template v-loading.fullscreen.lock="fullscreenLoading">


            <el-form ref="elForm" :model="formData" size="medium" label-width="100px" class="margin-top-20">

                <el-row type="flex" justify="start" align="middle">
                    <el-col :span="12">
                        <el-form-item label="计划号" prop="name">
                            <el-input v-model="formData.name" placeholder="" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属类型" prop="companytype">
                            <el-select :style="{width: '60%'}" v-model="formData.companytype" placeholder="请搜索归属类型">
                                <el-option v-for="(item, index) in companytypeOptions" :key="item.value"
                                    :label="item.text" :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用途类型" prop="c_type">
                            <el-select :style="{width: '60%'}" v-model="formData.c_type" placeholder="请搜索用途类型">
                                <el-option v-for="(item, index) in c_typeOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计划类型" prop="type">
                            <el-select :style="{width: '60%'}" v-model="formData.type" placeholder="请搜索计划类型"
                                @change="getplanname">
                                <el-option v-for="(item, index) in typeOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="start" align="middle">
                    <el-col :span="12">
                        <el-form-item label="合同编号" prop="ht_id">
                            <el-select clearable :style="{width: '60%'}" v-model="formData.ht_id" filterable remote
                                reserve-keyword placeholder="请搜索合同">
                                <el-option v-for="(item, index) in htOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户名称" prop="company_id">
                            <el-select clearable :style="{width: '60%'}" v-model="formData.company_id" filterable remote
                                reserve-keyword placeholder="请搜索客户名称">
                                <el-option v-for="(item, index) in companyOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="牌号" prop="grade_id">
                            <el-select clearable :style="{width: '60%'}" v-model="formData.grade_id" filterable remote
                                reserve-keyword placeholder="请搜索牌号">
                                <el-option v-for="(item, index) in grade_idOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交付时间" prop="delivery_time">
                            <el-date-picker v-model="formData.delivery_time" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="start" align="middle">
                    <el-col :span="12">
                        <el-form-item label="生产日期" prop="pd">
                            <el-date-picker v-model="formData.pd" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remrk">
                            <el-input type="textarea" autosize placeholder="请输入内容" v-model="formData.remrk">
                            </el-input>

                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row type="flex" justify="start" align="middle">
                    <el-col :span="12">
                        <el-form-item label="类型" prop="type">

                            <el-select clearable v-model="formData1.type" filterable remote reserve-keyword
                                @change="changetype()" placeholder="请搜索类型">
                                <el-option v-for="(item, index) in d_typeOptions" :key="item.value" :label="item.text"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="捆包号" prop="name">

                            <el-input v-model="formData1.name" placeholder="请选择类型" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="零件号" prop="partno_id">
                                <el-select clearable v-model="formData1.partno_id" filterable remote reserve-keyword @change="changepartno()"
                                           placeholder="请搜索零件号" >
                                    <el-option v-for="(item, index) in partnoOptions" :key="item.value"
                                               :label="item.text" :value="item.value" :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="start" align="middle">
                        <el-col>
                            <el-form-item label="数量" width="150">

                                    <el-input v-model="formData1.sheets" placeholder="请输入数量"></el-input>

                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="厚" width="150">


                                    <el-input v-model="formData1.d" placeholder="请输入厚"></el-input>


                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="宽" width="150">


                                    <el-input v-model="formData1.w" placeholder="请输入宽"></el-input>



                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="长" width="150">


                                    <el-input v-model="formData1.h" placeholder="请输入长"></el-input>


                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="重量" width="150">


                                    <el-input v-model="formData1.weight" placeholder="请输入重量"></el-input>


                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row type="flex" justify="start" align="middle">
                    <el-col>
                        <el-form-item label="采购原料价格" width="150" :rules="{required:true,message:'此项必填',trigger:blur}">

                            <el-input v-model="formData1.po_price" placeholder="请输入采购原料价格均衡价格"></el-input>

                        </el-form-item>
                    </el-col>
                        <el-col>
                            <el-form-item label="工序" width="150">

                                    <el-input v-model="formData1.processes" placeholder="请输入工序"></el-input>

                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="库区" width="150">

                                    <el-select clearable v-model="formData1.ware_id" filterable remote reserve-keyword
                                        placeholder="请搜索库区" :remote-method="getware">
                                        <el-option v-for="(item, index) in wareOptions" :key="item.value"
                                            :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>

                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="库位" width="150">

                                    <el-input v-model="formData1.kuwei" placeholder="请输入库位"></el-input>

                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="备注" width="150">

                                    <el-input v-model="formData1.remark" placeholder="请输入备注"></el-input>

                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row type="flex" justify="start" align="middle">
                        <el-col :span="12">
                            <el-form-item label="钢板信息" prop="coil_id">
                                <el-select clearable :style="{width: '80%'}" v-model="coil_id" filterable remote
                                    reserve-keyword placeholder="钢板信息">
                                    <el-option v-for="(item, index) in plateOptions" :key="item.value"
                                        :label="item.text" :value="item.value" :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" @click="addForm">加入计划</el-button>
                            </el-form-item>

                        </el-col>


                </el-row>
                <el-row v-for="(item, index) in formData.coil_id">
                    <el-col>
                        <el-form-item label="钢板信息" prop="owner_id">
                            {{plateOptions[item]['text']}}
                            <el-button type="primary" @click="removeForm(item)">移除</el-button>

                        </el-form-item>
                        <template>

                        </template>
                    </el-col>
                </el-row>


                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>


        </template>

    </div>


    <script src="/static/js/element/vue.js"></script>
    <script src="/static/js/element/index.js"></script>

    <script src="/static/js/admin.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                fullscreenLoading: false,
                isLoading: false,
                message: 'Hello Vue.js!',
                input: '',
                formData: {
                    name: '',
                    type: 11,
                    delivery_time: Date.parse(new Date()),
                    pd: Date.parse(new Date()),
                    coil_id: [],


                },
                formData1:{},
                first: 1,
                companytypeOptions: {},
                c_typeOptions: {},
                d_typeOptions: {},
                htOptions: {},
                typeOptions: [],
                companyOptions: {},
                grade_idOptions: {},
                coilOptions: {},
                plateOptions: {},
                partnoOptions: {},
                coil_id: '',
                tableData: [],
                plan: [],
                name: ''
            },
            created() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);
                this.getware();
                this.getcompanytype();
                this.getc_type();
                this.getht();
                this.getcompany();
                this.getgrade_id();
                this.getplate();
                this.gettype();

                this.getplanname();
                this.gettp();
                this.getpartno();
            }, methods: {
                edit(i) {
                    // 方案一
                    // 当数据嵌套的时候可以使用
                    // 需要需要注意
                    // 必须保证每一条数据在一开始的时候就存在对应字段
                    // 可以在数据请求回来后先添加对应字段再渲染
                    // 否则vue监听不到新加入的字段
                    // 也就不能实现页面交互效果
                    // row.$isEdit = true;

                    // 方案二
                    // 如果数据有嵌套
                    // 不推荐使用
                    this.$set(this.tableData[i], "$isEdit", true);
                },
                // 确认提交
                // 发送给后端
                // 此demo没有后端
                confirmSubmit(row) {

                },
                // 删除数据
                // 分前端和请求接口删除
                deleteData(row, i, data) {
                    // console.log( this.plan[data])
                    // console.log(i)
                    // console.log(data)
                    // const index1 = this.plan.indexOf(data);
                    // console.log(index1)
                    // if (index1 !== -1) {
                    this.plan[data].splice(i, 1);
                    // this.$set(this.plan,index , [])
                    // }
                    // if (row.$isEdit) {
                    //     this.tableData.splice(i, 1);
                    // } else {
                    //     console.log("向后端发请求");
                    // }
                },
                changepartno(row, data, i) {
                    // console.log(row)
                    //  console.log(i)
                    // console.log(data)
                    let that = this;
                    let pa = that.partnoOptions[that.formData1.partno_id]
                    console.log(pa);
                    that.$set(that.formData1, "d", pa.d);
                    that.$set(that.formData1, "w", pa.w);
                    that.$set(that.formData1, "h", pa.h);
                    that.$set(that.formData1, "weight", pa.weight);
                    that.$set(that.formData1, "grade_id", pa.grade_id);
                    that.$set(that.formData1, "sheets", pa.sheets);
                    // that.$set(that.formData1, "num", pa.num);
                    // that.$set(row, "name", pa.d);
                    // row.d=pa.d;
                    // row.w=pa.w;
                    // row.h=pa.h;
                    // row.weight=pa.weight;
                    // row.grade_id=pa.grade_id;
                    // row.sheets=pa.sheets;
                },
                changetype(row, data, i) {
                    let that = this;
                    $.post('{:url("hxkj/confirm")}',
                        {
                            type: this.formData1.type

                        },
                        function (data, item) {
                            // console.log(data);
                            that.$set(that.formData1, "name", data.data);
                            // row.name = data.data
                        });
                },


                addlistForm(index) {
                    console.log('add---------' + index)
                    let ne = {
                        ht_id: this.formData.ht_id,
                        grade_id: this.formData.grade_id,
                        company_id: this.formData.company_id,
                        companytype: this.formData.companytype,
                        d: this.plateOptions[index].d,
                        w: this.plateOptions[index].w,
                        h: this.plateOptions[index].h,
                        $isEdit: true,
                    }
                    let length = 0
                    if (this.plan[index]) {

                        length = this.plan[index].length
                    } else {
                        // this.plan.push([]);
                        this.$set(this.plan, index, [])
                        length = 0;
                    }
                    // console.log(length)
                    // this.plan.splice(index, 0,nr);
                    this.$set(this.plan[index], length, ne)
                    // console.log(this.plan)
                },
                removeForm(index) {
                    // this.formData.coil_id.splice(index, 1);
                    const index1 = this.formData.coil_id.indexOf(index);
                    if (index !== -1) {
                        this.formData.coil_id.splice(index1, 1);
                        this.$set(this.plan, index, [])
                    }
                },
                addForm() {
                    let that = this;

                    console.log(that.coil_id)
                    if (!(that.coil_id > 0)) {
                        return;
                    }
                    that.formData.coil_id.unshift(that.coil_id)
                    console.log(that.formData.coil_id)
                    that.formData.coil_id = Array.from(new Set(that.formData.coil_id)); // 将Set转换为数组并赋值给uniqueArray

                },
                submitForm() {
                    console.log(this.formData)
                    console.log(this.plan)
                    let that = this;
                    $.post('{:url("planhj/addPostvue")}',
                        {
                            formData: that.formData,
                            plan: that.plan,
                            formData1:that.formData1
                        },
                        function (data, item) {
                            // console.log(data);

                            // that.formData.name = data.data
                            // that.name=data.data
                            console.log(data)
                            if (data.code == 1) {
                                that.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            } else {
                                that.$message.error(data.msg);
                            }
                            setTimeout(() => {
                                if (data.url) {
                                    //返回带跳转地址
                                    window.location.href = data.url;
                                } else {
                                    if (data.code == 1) {
                                        //刷新当前页
                                        reloadPage(window);
                                    }
                                }
                            }, 1000);

                        });


                },
                resetForm() {
                    this.formData = {
                        name: this.name,
                        type: 1,
                        delivery_time: new Date(),
                        pd: new Date(),
                        coil_id: [],


                    };
                    this.plan = [];
                },
                getpartno() {
                    let that = this;
                    $.post('{:url("hxkj/getpartno")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.partnoOptions = data.data
                        });
                },
                gettp() {
                    let that = this;
                    $.post('{:url("hxkj/gettphj")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.typeOptions = data.data
                        });
                },
                //获取计划号
                getplanname() {
                    let that = this;
                    $.post('{:url("hxkj/getplanname")}',
                        {
                            type: that.formData.type

                        },
                        function (data, item) {
                            // console.log(data);
                            that.$set(that.formData, "name", data.data);
                            that.$nextTick(() => {
                                that.formData.name = data.data
                                that.name = data.data
                            });

                        });
                },
                getware() {
                    let that = this;
                    $.post('{:url("hxkj/getware")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.wareOptions = data.data
                        });
                },
                gettype() {
                    let that = this;
                    $.post('{:url("hxkj/gettype")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.d_typeOptions = data.data
                        });
                },
                getplate() {

                    let that = this;
                    that.isLoading = true;
                    $.post('{:url("hxkj/getplate")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.plateOptions = data.data
                            that.isLoading = false;
                        });
                },
                getgrade_id() {
                    let that = this;
                    // console.log(222)
                    $.post('{:url("hxkj/getgrade_id")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.grade_idOptions = data.data
                        });
                },
                getcompany() {
                    let that = this;
                    // console.log(222)
                    $.post('{:url("hxkj/getcompany")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.companyOptions = data.data
                        });
                },
                getht() {
                    let that = this;
                    // console.log(222)
                    $.post('{:url("hxkj/getht")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.htOptions = data.data
                        });
                },
                getc_type() {
                    let that = this;
                    // console.log(222)
                    $.post('{:url("hxkj/getctype")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.c_typeOptions = data.data
                        });
                },
                getcompanytype() {
                    let that = this;
                    // console.log(222)
                    $.post('{:url("hxkj/getcompanytype")}',
                        {},
                        function (data, item) {
                            // console.log(data);

                            that.companytypeOptions = data.data
                        });
                },
                getowners_new() {
                    console.log(11111)
                }
            }

        })
    </script>
</body>

</html>